import { Button, Card, Form, Input, message, Space, Table } from 'antd'
import { SearchOutlined, DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons'

import React, { useEffect, useState } from 'react'
import { ColumnsType } from 'antd/lib/table'
import { IHospitalSetList } from '@/api/hospital/model/hospitalSetTypes'
import { batchRemove, deleteHospitalSetById, getHospitalSetList } from '@/api/hospital/hospitalSet'
import { useNavigate } from 'react-router-dom'
import confirm from 'antd/lib/modal/confirm'

export default function HospitalSet() {
    // 创建编程式导航
    const navigate = useNavigate()
    const onFinish = () => {
        // 3. 获取表单数据
        // console.log(form.getFieldsValue())
        let { hoscode, hosname } = form.getFieldsValue()
        // 设置hosname 和 hoscode的状态数据
        setHoscode(hoscode)
        setHosname(hosname)
        setCurrent(1)
    }
    // 实现清空功能
    const reset = () => {
        //1. 清空表单数据
        form.resetFields()
        //2. 清空状态hosname和hoscode，触发重新发送请求
        setHoscode(undefined)
        setHosname(undefined)
        setCurrent(1)
    }
    /**
     * 根据id删除 hospistalSet
     * @param id 
     */
    const deleteById = (id: string) => {
        confirm({
            title: '删除医院设置',
            icon: <ExclamationCircleOutlined />,
            content: '确定要删除数据么？',
            async onOk() {
                await deleteHospitalSetById(id)
                message.success('删除成功')
                // 重新获取医院设置列表数据
                _getHospitalSetList()
            }
        });
    }
    const batchDelete = async () => {
        confirm({
            title: '删除医院设置',
            icon: <ExclamationCircleOutlined />,
            content: '确定要删除数据么？',
            async onOk() {
                await batchRemove(selectedKeys)
                message.success('删除成功')
                // 重新获取医院设置列表数据
                _getHospitalSetList()
                // 清空 selectedKeys数组
                setSelectedKeys([])
            }
        });

    }
    const columns: ColumnsType<any> = [
        {
            title: '序号',
            // 设置列宽
            width: 70,
            // 设置文字对齐方式
            align: 'center',
            render(value, row, index) {
                return (current - 1) * pageSize + (index + 1)
            },
            // 设置列固定左侧
            fixed: 'left'
        },
        {
            title: '医院名称',
            dataIndex: 'hosname'
        },
        {
            title: '医院编号',
            dataIndex: 'hoscode',
            width: 100
        },
        {
            title: 'api基础路径',
            dataIndex: 'apiUrl'
        },
        {
            title: '签名',
            dataIndex: 'signKey'
        },
        {
            title: '联系人姓名',
            dataIndex: 'contactsName',
            width: 120
        },
        {
            title: '联系人电话',
            dataIndex: 'contactsPhone',
            width: 150
        },
        {
            title: '操作',
            render(row) {
                return (
                    <Space>
                        <Button icon={<EditOutlined />} onClick={() => navigate('/syt/hospital/hospitalSet/edit/' + row.id)} type='primary'></Button>
                        <Button icon={<DeleteOutlined />} onClick={() => deleteById(row.id)} type='primary' danger></Button>
                    </Space>
                )
            },
            // 设置列固定到右侧
            fixed: 'right',
            width: 90
        }

    ]
    // 创建一个form对象，操作表单数据
    const [form] = Form.useForm()

    // 定义状态数据
    // loading 状态
    let [loading, setLoading] = useState<boolean>(false)
    // 医院设置列表状态数据
    let [hospitalList, setHospitalList] = useState<IHospitalSetList>([])
    // 当前页
    let [current, setCurrent] = useState<number>(1)
    // 每页几条
    let [pageSize, setPageSize] = useState<number>(3)
    // 总条数
    let [total, setTotal] = useState<number>(10)
    // hosname
    let [hosname, setHosname] = useState<string>()
    // hoscode
    let [hoscode, setHoscode] = useState<string>()
    // 设置被选中的状态
    let [selectedKeys, setSelectedKeys] = useState<React.Key[]>([])
    // didMount生命周期发送请求，设置状态数据
    async function _getHospitalSetList() {
        // 开启loading
        setLoading(true)
        let { records, total } = await getHospitalSetList({
            page: current,
            limit: pageSize,
            hoscode,
            hosname
        })
        setHospitalList(records)
        setTotal(total)
        // 关闭loading
        setLoading(false)
    }
    useEffect(() => {
        _getHospitalSetList()
    }, [current, pageSize, hoscode, hosname])
    return (
        <Card>

            {/* 1. form表单 */}
            <Form
                // 2. form元素绑定
                form={form}
                name="basic"
                onFinish={onFinish}
                layout='inline'
            >
                <Form.Item
                    name="hosname"
                >
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item
                    name="hoscode"
                >
                    <Input placeholder='医院编号' />
                </Form.Item>

                <Form.Item >
                    <Space>
                        <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
                            查询
                        </Button>
                        <Button onClick={reset} disabled={!hosname && !hoscode}>清空</Button>
                    </Space>
                </Form.Item>
            </Form>
            {/* 2. buttons按钮 */}
            <Space className='mt20 mb20'>
                <Button type='primary' onClick={() => navigate('/syt/hospital/hospitalSet/add')}>添加</Button>
                <Button disabled={selectedKeys.length === 0} onClick={batchDelete}>批量删除</Button>
            </Space>
            {/* 3. table列表 */}
            <Table
                loading={loading}
                scroll={{
                    x: 1300
                }}
                rowKey={'id'}
                columns={columns}
                dataSource={hospitalList}
                pagination={{
                    current,
                    total,
                    pageSize,
                    pageSizeOptions: [5, 10, 15],
                    showSizeChanger: true,
                    showQuickJumper: true,
                    onChange: (page: number, pageSize: number) => {
                        //重置当前页
                        setCurrent(page)
                        // 重置每页显示几条
                        setPageSize(pageSize)
                    }
                }}
                rowSelection={{
                    onChange(selectedRowKeys: React.Key[]) {
                        console.log('selectedRowKeys', selectedRowKeys)
                        // 设置被选中的记录id 状态数组
                        setSelectedKeys(selectedRowKeys)
                    }
                }}
            />
        </Card>

    )
}
